<template>
	<div class="common checkrecord">
		<div class="common-top clearfix">
			<div class="left flex flex-align-center" style="height:100%;">
				<span class="tips">吧台盘点记录</span>
			</div>
			<div class="right flex flex-align-center" style="height:100%;margin-right:20px;">
				<div class="search-btn"  @click="$router.push('/Bar_Check/check')">
					<span>吧台盘点</span>
				</div>
			</div>
		</div>
		<div class="content-box">
			<div class="content">
				<div  class="titleTable">
					<table>
	                    <tr>
	                        <th style="width:9%">序号</th>
	                        <th style="width:13%">时间</th>
	                        <th style="width:13%">盈亏种类</th>
	                        <!-- <th style="width:13%">盘盈数量(个)</th> -->
	                        <!-- <th style="width:13%">盘亏数量(个)</th> -->
	                        <th style="width:13%">操作人员</th>
	                        <th style="width:13%">备注</th>
	                        <th style="width:13%">操作</th>
	                    </tr>
	                </table>
				</div>
                <div class="scrollBox">
                    <div class="scroll" :style="{'height':homeArr.length*10+'%'}">
                        <table class="conTable">
                            <tr v-for="(item,ind) in homeArr">
                                <td style="width:9%" v-text="ind+1+(currentPage-1)*pageSize"></td>
                                <td style="width:13%">{{item.addTime | numberToAllDate('')}}</td>
                                <td style="width:13%" v-text="item.skuCount"></td>
                                <!-- <td style="width:13%" v-text="item.singleProfit"></td> -->
                                <!-- <td style="width:13%" v-text="item.singleLosses"></td> -->
                                <td style="width:13%" v-text="item.operatorName"></td>
                                <td style="width:13%" v-text="item.notes?item.notes:'-'" :title="item.notes"></td>
                                <td style="width:13%"><span style="color: #618bfb;font-size:16px;cursor:pointer;" @click="checkDetailFn(item)">详情</span></td>
                            </tr>
                        </table>
                    </div>
                </div>
                 <div class="pagers">
				    <el-pagination
				      	@current-change="handleCurrentChange"
				      	:current-page.sync="currentPage"
				      	:page-size="pageSize"
				      	layout="total, prev, pager, next,jumper"
				      	:total="total">
				    </el-pagination>
                </div>
			</div>
		</div>

		<div class="dialog-box" v-if="dialogBtn" @click="dialogBtn=false">
			<div class="dialog position-middle-center" @click.stop="" style="width:720px;">
				<span class="close-btn" @click="dialogBtn=false"><i class="iconfont icon-close-b"></i></span>
				<div class="dialog-title">盘点详情</div>
				<div class="dialog-content" style="margin-top:20px;height:400px;">
					<div class="dialog-content-title">
						<table style="width:100%;">
							<tr>
								<th style="width:12%">序号</th>
		                        <th style="width:22%">商品名称</th>
		                        <th style="width:22%">应有数量(个)</th>
		                        <th style="width:22%">实际数量(个)</th>
		                        <th style="width:22%">备注</th>
							</tr>
						</table>
					</div>
					<div class="dialog-scroll">
						<div class="scroll-inner">
							<table style="width:100%;text-align:center;">
								<tr v-for="(item,ind) in checkDetailArr"  :class="{'red-bg':item.possibleQty!=item.actualQty}">
	                                <td style="width:12%" v-text="ind+1"></td>
	                                <td style="width:22%" v-text="item.skuName"></td>
	                                <td style="width:22%" v-text="item.possibleQty"></td>
	                                <td style="width:22%" v-text="item.actualQty"></td>
	                                <td style="width:22%"><span style="font-size:16px;cursor:pointer;" :title="item.notes" v-text="item.notes?item.notes:'-'"></span></td>
	                            </tr>
							</table>
						</div>
					</div>
				</div>
				<div class="dialog-footer clearfix">
					<!-- <div class="footer-btn cancle" @click="dialogBtn=false">取消</div> -->
					<!-- <div class="footer-btn sure right" @click="print">补打小票</div> -->
				</div>
			</div>
		</div>

		<div style="display:block;">
			<div id="print">
				<h1 style="text-align:center;font-size:18px;">欢迎使用火星捕手</h1>
				<p style="text-align:center;font-size:16px;">盘点小票</p>
		    	<div>
		    		<span>店铺名:</span>
		    		<span v-text="store.storeName"></span>
		    	</div>
		    	<div>
		    		<span>操作员:</span>
		    		<span v-text="store.employeeName"></span>
		    	</div>
				<div>
		    		<span>打印时间:</span>
		    		<span>{{new Date() | numberToAllDate('')}}</span>
		    	</div>
		    	<div v-for="(item,idx) in checkDetailArr" style="margin-top:10px;border:1px solid #444">
		    		<div style="font-size:12px;">
			    		<span>名称:</span>
			    		<span v-text="item.productName"></span>
			    	</div>
			    	<div style="font-size:12px;">
			    		<span>应有散装(个):</span>
			    		<span v-text="item.accurateSingleQty"></span>
			    	</div>
			    	<div style="font-size:12px;">
			    		<span>实际散装(个):</span>
			    		<span v-text="item.checkSingleQty"></span>
			    	</div>
			    	<div style="font-size:12px;">
			    		<span>备注:</span>
			    		<span v-text="item.notes"></span>
			    	</div>
		    	</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  	props:['storeId','store'],
  	data(){
		return {
			currentPage: 1,
	        pageSize:10,
	        total:0,
            billData:{
	        	kind:0,
	        	notes:'',
	        },
	        sourceType:{
				PURCHASE:'采购',
				ALLOCATION:'店铺调拨',
				CHECK_IN:'盘点入库',
				STOCK_OUT_ONE:'吧台到仓库',
				CHECK_OUT:'盘点出库',
				STORAGE:'仓储（仓库至吧台）',
				REFUND:'退单入库',
				SALES:'销售出库',
				DECLINE:'吧台下架'
			},
	        dialogBtn:false,
	        homeArr:[],//盘点列表
	        checkDetailArr:[],//盘点详情列表
	        willCheckBody:{}//将要判断的  body
		}
	},
	watch:{
	},
	methods:{
		//翻页
	    handleCurrentChange(val) {
	        console.log(`当前页: ${val}`);
	        this.getHomeData(val-1);
	    },
	    // 查看盘点详情
	    checkDetailFn(item){
	    	// this.$http.get('/check-record-details?type=COUNTER'+'&id='+item.id+'&storeId='+this.storeId).then((res)=>{
	    		this.dialogBtn = true;
	    		this.checkDetailArr = item.items;
			// })
			
	    },
	    //获取首页数据
	    getHomeData(currentPage = 0){
	    	// let query = '?page='+(currentPage?currentPage-1:0)+'&size='+this.pageSize+'&storeId='+this.storeId+'&type=COUNTER';
	    	this.homeArr = [];
	    	// this.$http.get('/check-record'+query).then((res)=>{
	    	// 	this.homeArr = res.data.content;
	    	// 	this.total = res.data.totalElements;
			// })
			this.$http({
				url:'find-barDetail',
				method:'GET',
				params:{
					storeId:this.storeId,
					page:currentPage
				}
			}).then(res=>{
				this.homeArr = res.data.content;
	    		this.total = res.data.totalElements;
				console.log(res);
			});
	    },
	    //小票打印
	    print(){
	    	this.$posPrint(1, document.getElementById("print").innerHTML);
	    },
	    //数据导出
	    excel(){
	    	let data = this.checkDetailArr;
	    	console.log(data)
            let html =  '<tr  style="font-size:18px;font-weight:900;text-align:center">'+  
                            '<td>商品名称</td>'+
                            '<td>应有散装(个)</td>'+
                            '<td>实际散装(个)</td>'+
                        '</tr>'
            for(var i=0;i<data.length;i++){
                html  +='<tr  style="font-size:14px;text-align:center">'+
                            '<td>'+data[i].productName+'</td>'+
                            '<td>'+data[i].accurateSingleQty+'</td>'+ 
                            '<td>'+'</td>'+
                        '</tr>'
            }
            let table = document.createElement('table');
            document.body.appendChild(table)
            table.style.display='none';
            // table.style.borderCollapse='collapse';
        	table.innerHTML = html;
            window.method5(table);
	    }
	},
	created () {
		this.getHomeData();
	},
	mounted() {
	},
	beforeDestroy() {
		sessionStorage.removeItem('localNotes');
	}
}
</script>
<style lang="scss" scoped>
	@import '../../../../static/css/common.scss';
	@import "checkrecord";
</style>